<template>
  <div class="viewer-controller">
    <div class="main-controls">
      <el-radio-group v-model="viewMode" size="large">
        <el-radio-button label="2d">2D 视图</el-radio-button>
        <el-radio-button label="3d">3D 视图</el-radio-button>
      </el-radio-group>
    </div>

    <div class="viewer-container">
      <ImageViewer
        v-if="viewMode === '2d'"
        :image-id="currentImageId"
        v-show="viewMode === '2d'"
      />
      <VolumeViewer
        v-if="viewMode === '3d'"
        :volume-data="volumeData"
        v-show="viewMode === '3d'"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import ImageViewer from './ImageViewer.vue'
import VolumeViewer from './VolumeViewer.vue'

const props = defineProps<{
  imageId?: string
  volumeData?: any
}>()

const viewMode = ref('2d')
const currentImageId = ref(props.imageId)

// 监听属性变化
watch(() => props.imageId, (newId) => {
  currentImageId.value = newId
})

// 导出组件接口
defineExpose({
  viewMode,
  setViewMode: (mode: '2d' | '3d') => {
    viewMode.value = mode
  }
})
</script>

<style scoped>
.viewer-controller {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main-controls {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid var(--el-border-color-light);
  display: flex;
  justify-content: center;
}

.viewer-container {
  flex: 1;
  position: relative;
  background-color: #000;
}

.viewer-container > * {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style> 